<template>
  <!-- <div class="banner-bottom" >
    <span class="one">{{day}}</span>
    <label class="tian">天</label>
    <span class="two">{{hour}}</span>
    <label class="shi">时</label>
    <span class="three">{{minute}}</span>
    <label class="fen">分</label>
    {{second}}
  </div> -->
  <div class="air_times">
    <div>
      <span>{{day}}</span>
      <label >DAYS</label>
    </div>
    <div>
      <span>{{hour}}</span>
      <label >HOURS</label>
    </div>
    <div>
      <span>{{minute}}</span>
      <label >MINS</label>
    </div>
    <div class="no_mar">
      <span>{{second}}</span>
      <label >SECS</label>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      startTime: {
        type: Number || String,
        default: new Date().getTime(),
      },
      endTime: {
        type: Number || String,
        default: new Date().getTime(),
      },
      status: {
        type: Number,
        default: 0,
      },
    },
    data () {
      return {
        day:'0',
        hour: '00',
        minute: '00',
        second: '00',
        count: (this.endTime - this.startTime),
        interval: null,
      }
    },
    methods: {
      start () {
        this.interval = setInterval(() => {
          
          this.count = this.count - 1000
          if (this.count <= 0) {
            console.log('超过了活动时间')
            this.second = '00'
            clearInterval(this.interval)
            
             // 活动已经结束
            if(this.status != 2){
              
            }
            this.timeDown()
            return
          }
          // console.log(this.count)
          this.day = parseInt(this.count / (60 * 60 * 1000)/24)
        //  if (this.day < 10) {
        //    this.day = '0' + this.day
        //  }
          this.hour = parseInt(this.count / (60 * 60 * 1000)) + ''
          if (this.hour < 10) {
            this.hour = '0' + this.hour
          }else if (this.hour >60 ){
            this.hour = parseInt(this.count / (60 * 60 * 1000)/60) + ''
            if (this.hour < 10){
              this.hour = '0' + this.hour
            }
          }
          let n = this.count % (60 * 60 * 1000)
          this.minute = parseInt(n / (60 * 1000)) + ''
          if (this.minute < 10) {
            this.minute = '0' + this.minute
          }
          let n2 = n % (60 * 1000)
          this.second = parseInt(n2 / 1000) + ''
          if (this.second < 10) {
            this.second = '0' + this.second
          }
          this.count--
        }, 1000)
      },
      timeDown () {
        this.$emit('timeDown', this.status)
      }
    },
    mounted () {
      clearInterval(this.interval)
      this.start()
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .air_times
    height: 110px
    padding: 0 67px
    margin-bottom: 60px
    &>div
      float: left
      width: 98px
      height: 110px
      margin-right: 25px
      background: rgba(14,12,71,0.45)
      border-radius: 13px
      color: #FFFFFF
      span
        display: block
        padding-top: 7px
        line-height: 71px
        font-size: 48px
      label
        line-height: 20px
        font-size: 14px
    .no_mar
      margin-right: 0
</style>